<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-row>
        <el-form-item label="MQTT 主题名" prop="topic">
          <el-input
            v-model="queryParams.topic"
            placeholder="MQTT 主题名"
            clearable
            style="width: 640px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="MQTT 报文" prop="message">
          <el-input
            v-model="queryParams.message"
            placeholder="MQTT 报文"
            type="textarea"
            clearable
            style="width: 800px" rows="10"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </el-row>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">解析</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <hr>

    <el-row v-if="this.show">
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-cpu"></i> 解析key的数量</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="el-table__cell is-leaf">
                  <div class="cell">属性</div>
                </th>
                <th class="el-table__cell is-leaf">
                  <div class="cell">值</div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf">
                  <div class="cell">解析key的数量</div>
                </td>
                <td class="el-table__cell is-leaf">
                  <div class="cell" v-if="outputNum">{{ outputNum }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="infoObjList" v-if="this.show" width="800">
      <el-table-column label="设备类型" prop="terminalType" align="center" width="120"/>
      <el-table-column label="客户标识" prop="terminalId" align="center" width="200"/>
      <el-table-column label="信息对象地址" prop="infoObjAddr" align="center" width="300" />
      <el-table-column label="值" prop="value" align="center" width="150" />
      <el-table-column label="时间戳" prop="timestamp" align="center" width="200" />
    </el-table>

  </div>
</template>

<script>
import {getProtocolMqtt} from "@/api/system/point_parser";

export default {
  name: "Role",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 角色表格数据
      infoObjList: [],
      terminalId: '',
      inputNum: 0,
      outputNum: 0,
      // 显示解析结果
      show: false,
      // 查询参数
      queryParams: {
        topic: '',
        message: ''
      },
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  created() {
    // this.queryData();
    this.loading = false;
  },
  methods: {
    /** 查询角色列表 */
    queryData() {
      this.loading = true;
      // 判断条件是否为空
      if (this.queryParams.topic === '' || this.queryParams.topic === undefined) {
        this.$alert("请输入MQTT 主题名", '系统提示', {
          dangerouslyUseHTMLString: true,
          type: 'success'
        });
        return;
      }

      if (this.queryParams.message === '' || this.queryParams.message === undefined) {
        this.$alert("请输入MQTT 报文", '系统提示', {
          dangerouslyUseHTMLString: true,
          type: 'success'
        });
        return;
      }

      getProtocolMqtt(this.queryParams.topic, this.queryParams.message).then(response => {
          this.infoObjList = response.data.list;
          this.inputNum = response.data.inputNum;
          this.outputNum = response.data.outputNum;
          this.terminalId = response.data.terminalId;
          this.loading = false;
          this.show = true;
        }
      );
    },
    // 取消按钮
    cancel() {
      this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
    }
  }
};
</script>
